<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>
<body>
<!--v-for:
    作用: 基于数据循环，多次渲染整个元素（常见于渲染数组）
    语法（遍历数组）:
        v-for="(item, index) in list“
            item——每一项的实体
            index——实体的下标
            (这两个值被取出来了,可以在每一项中使用)
        v-for="item in list"
            item——每一项的实体
            (只取一个值)
 -->
  <div id="app">
    <h3>小黑水果店</h3>
<!--ul 和 li 一起用，用于创建无序列表-->
    <ul>
      <li v-for="(item, index) in list">
        <!--这里都使用了两个变量-->
        {{ item }} - {{ index }}
      </li>
    </ul>

    <ul>
      <li v-for="item in list">
        <!--这里使用了一个变量-->
        {{ item }}
      </li>
    </ul>
      <ul>
<!--key属性:
        对每一个列表项添加唯一标识,便于对vue的列表项进行正确排序复用,不加key删除的时候无法准确定位到删除的数据
    注意点:
        1.key的值只能是字符串或者数字类型（不能是boolean型数据）
        2.key的值必须要有唯一性
        3.推荐用id作为key(唯一),不推荐使用index作为key(index是前端生成的，id是后端传过来的)
-->
          <li v-for="(item , index) in booksList " :key="item.id">
              <!--这里使用了一个变量-->
              {{ item.name }} - {{item.author}}
              <button @click="de(item.id)">删除</button>
          </li>
      </ul>
  </div>

  <script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
  <script>
    const app = new Vue({
      el: '#app',
      data: {
        list: ['西瓜', '苹果', '鸭梨', '榴莲'],
          booksList: [
              { id: 1, name: '《红楼梦》', author: '曹雪芹' },
              { id: 2, name: '《西游记》', author: '吴承恩' },
              { id: 3, name: '《水浒传》', author: '施耐庵' },
              { id: 4, name: '《三国演义》', author: '罗贯中' }
          ]
      },
        methods: {
          de(id){
              //根据id删除数组中的对应项 ———— filter
              //filter: 根据条件，保留满足条件的对应项，得到一个新的数组
              //filter只会把处理后的新数组重新保存起来，并不会把这些数据写回数组，所以要有一个赋值的过程
              this.booksList = this.booksList.filter(item => item.id !== id)
          }
        }
    })
  </script>
</body>
</html>